<mat-card class="card">
  <mat-card-header>
    <h3 mat-card-title>
      @if (isFilesystem()) {
        {{ 'Space Management' | translate }}
      }
      @if (isZvol()) {
        {{ 'Zvol Space Management' | translate }}
      }
    </h3>
    @if (!isZvol()) {
      <button
        *ixRequiresRoles="requiredRoles"
        mat-button
        ixTest="edit-quotas"
        (click)="editDataset()"
      >{{ 'Edit' | translate }}</button>
    }
  </mat-card-header>
  <mat-card-content>
    <ix-space-management-chart [dataset]="dataset()"></ix-space-management-chart>

    <div class="chart-extra">
      @if (!isZvol()) {
        @if (dataset()?.refreservation.parsed) {
          <div class="details-item">
            <div class="label">{{ 'Reserved for Dataset' | translate }}:</div>
            <div class="value">
              {{ dataset().refreservation.parsed | ixFileSize }}
            </div>
          </div>
        }
        @if (dataset()?.reservation.parsed) {
          <div class="details-item">
            <div class="label">
              {{ 'Reserved for Dataset & Children' | translate }}:
            </div>
            <div class="value">
              {{ dataset().reservation.parsed | ixFileSize }}
            </div>
          </div>
        }
      }

      @if (isZvol()) {
        <div class="details-item">
          <div class="label">{{ 'Provisioning Type' | translate }}:</div>
          @if (dataset().thick_provisioned) {
            <div class="value">
              {{ 'Thick' | translate }}
            </div>
          }
          @if (!dataset().thick_provisioned) {
            <div class="value">
              {{ 'Sparse' | translate }}
            </div>
          }
        </div>
        @if (dataset()?.volsize.parsed) {
          <div class="details-item">
            <div class="label">{{ 'Volume Size' | translate }}:</div>
            <div class="value">
              {{ +dataset().volsize.parsed | ixFileSize }}
            </div>
          </div>
        }
      }
    </div>

    <div class="details">
      <div class="details-item">
        <div class="label">
          @if (isFilesystem()) {
            {{ 'Available Space' | translate }}:
          }
          @if (isZvol()) {
            {{ 'Space Available to Zvol' | translate }}:
          }
        </div>
        <div class="value">
          {{ dataset().available.parsed | ixFileSize }}
        </div>
      </div>
      @if ((isFilesystem() && hasQuota()) || hasRefQuota()) {
        <div class="details-item">
          <div class="label">{{ 'Applied Dataset Quota' | translate }}:</div>
          @if (hasQuota()) {
            <div class="value">
              {{
                '{n} (applies to descendants)' | translate : {
                n: dataset().quota.parsed | ixFileSize
              }
              }}
            </div>
          } @else {
            <div class="value">
              {{ dataset().refquota.parsed | ixFileSize }}
            </div>
          }
        </div>
      }
      @if (hasInheritedQuotas()) {
        <div class="details-item">
          <div class="label">{{ 'Inherited Quotas' | translate }}:</div>
          <div class="value">
            {{
              '{n} from {dataset}' | translate : {
                n: inheritedQuotasDataset.quota.parsed | ixFileSize,
                dataset: inheritedQuotasDataset.name
              }
            }}
          </div>
          <a
            [ixTest]="[inheritedQuotasDataset.id, 'go-to-dataset']"
            [routerLink]="['/', 'datasets', inheritedQuotasDataset.id]"
          >
            {{ 'Go To Dataset' }}
          </a>
        </div>
      }
  </div>

  @if (!isZvol()) {
    <div class="details">
      <div class="details-item">
        <div class="label">{{ 'User Quotas' | translate }}:</div>
          @if (checkQuotas()) {
            @if (!isLoadingQuotas) {
              <div class="value">
                @if (userQuotas) {
                  {{ 'Quotas set for {n, plural, one {# user} other {# users} }' | translate: { n: userQuotas } }}
                } @else {
                  {{ 'None' | translate }}
                }
              </div>
            } @else {
              <ngx-skeleton-loader class="value-placeholder"></ngx-skeleton-loader>
            }
          } @else {
            {{ 'None' | translate }}
          }
          @if (checkQuotas()) {
            <a
              [ixTest]="[dataset().id, 'manage-user-quotas']"
              [routerLink]="['/', 'datasets', dataset().id, 'user-quotas']"
              [ixUiSearch]="searchableElements.elements.manageUserQuotas"
            >
              {{ 'Manage User Quotas' | translate }}
            </a>
          }
      </div>
      <div class="details-item">
        <div class="label">{{ 'Group Quotas' | translate }}:</div>
        @if (checkQuotas()) {
          @if (!isLoadingQuotas) {
            <div class="value">
              @if (groupQuotas) {
                {{ 'Quotas set for {n, plural, one {# group} other {# groups} }' | translate: { n: groupQuotas } }}
              } @else {
                {{ 'None' | translate }}
              }
            </div>
          } @else {
            <ngx-skeleton-loader class="value-placeholder"></ngx-skeleton-loader>
          }
        } @else {
          {{ 'None' | translate }}
        }
        @if (checkQuotas()) {
          <a
            [ixTest]="[dataset().id, 'manage-group-quotas']"
            [routerLink]="['/', 'datasets', dataset().id, 'group-quotas']"
            [ixUiSearch]="searchableElements.elements.manageGroupQuotas"
          >
            {{ 'Manage Group Quotas' | translate }}
          </a>
        }
      </div>
    </div>
  }
  </mat-card-content>
</mat-card>


